<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        light: '#F3F4F6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .todo-enter {
                animation: fadeIn 0.3s ease-in-out;
            }
            .todo-complete {
                text-decoration: line-through;
                opacity: 0.7;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-2xl">
        <header class="text-center mb-8">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-2">待办事项列表</h1>
            <p class="text-gray-600">添加、管理和完成你的任务</p>
        </header>

        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <form id="todoForm" class="flex gap-2">
                <input 
                    type="text" 
                    id="todoInput" 
                    placeholder="输入新的任务..." 
                    class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                    required
                >
                <button 
                    type="submit" 
                    class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all flex items-center gap-2"
                >
                    <i class="fa fa-plus"></i>
                    <span>添加</span>
                </button>
            </form>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-gray-800">任务列表</h2>
                <button id="clearCompleted" class="text-gray-500 hover:text-danger text-sm transition-colors">
                    <i class="fa fa-trash-o mr-1"></i> 清除已完成
                </button>
            </div>
            
            <div id="todoList" class="space-y-2">
                <!-- 任务项将通过JavaScript动态添加 -->
                <div class="text-gray-500 text-center py-8 border border-dashed border-gray-300 rounded-lg" id="emptyState">
                    <i class="fa fa-check-circle-o text-4xl mb-2 opacity-30"></i>
                    <p>还没有任务，添加你的第一个任务吧！</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // DOM元素引用
        const todoForm = document.getElementById('todoForm');
        const todoInput = document.getElementById('todoInput');
        const todoList = document.getElementById('todoList');
        const clearCompletedBtn = document.getElementById('clearCompleted');
        const emptyState = document.getElementById('emptyState');

        // 初始化任务列表
        function init() {
            // 从localStorage加载任务
            loadTodos();
            
            // 添加事件监听器
            todoForm.addEventListener('submit', addTodo);
            clearCompletedBtn.addEventListener('click', clearCompletedTodos);
        }

        // 任务数据结构: { id: 唯一标识, text: 任务文本, completed: 完成状态 }

        // 从localStorage加载任务
        function loadTodos() {
            const todos = JSON.parse(localStorage.getItem('todos') || '[]');
            todos.forEach(todo => {
                addTodoToDOM(todo);
            });
            updateEmptyState();
        }

        // 保存任务到localStorage
        function saveTodos() {
            const todos = [];
            // 获取所有任务元素
            document.querySelectorAll('.todo-item').forEach(item => {
                todos.push({
                    id: item.dataset.id,
                    text: item.querySelector('.todo-text').textContent,
                    completed: item.classList.contains('todo-complete')
                });
            });
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 添加新任务
        function addTodo(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            
            const todoText = todoInput.value.trim();
            if (!todoText) return; // 忽略空任务
            
            // 创建新任务对象
            const newTodo = {
                id: Date.now().toString(), // 使用时间戳作为唯一ID
                text: todoText,
                completed: false
            };
            
            // 添加到DOM
            addTodoToDOM(newTodo);
            
            // 保存到localStorage
            saveTodos();
            
            // 清空输入框
            todoInput.value = '';
            todoInput.focus();
            
            // 更新空状态显示
            updateEmptyState();
        }

        // 将任务添加到DOM
        function addTodoToDOM(todo) {
            // 创建任务元素
            const todoItem = document.createElement('div');
            todoItem.className = `todo-item flex items-center justify-between p-3 border rounded-lg transition-all hover:shadow-sm todo-enter ${todo.completed ? 'todo-complete' : ''}`;
            todoItem.dataset.id = todo.id;
            
            // 创建任务内容
            const todoContent = document.createElement('div');
            todoContent.className = 'flex items-center gap-3 flex-1';
            
            // 创建复选框
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.completed;
            checkbox.className = 'w-5 h-5 text-primary rounded focus:ring-primary/50 cursor-pointer';
            checkbox.addEventListener('change', () => {
                todoItem.classList.toggle('todo-complete');
                saveTodos();
            });
            
            // 创建任务文本
            const textSpan = document.createElement('span');
            textSpan.className = 'todo-text text-gray-800 break-words';
            textSpan.textContent = todo.text;
            
            // 创建删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'text-gray-400 hover:text-danger transition-colors p-2';
            deleteBtn.innerHTML = '<i class="fa fa-times"></i>';
            deleteBtn.addEventListener('click', () => {
                todoItem.classList.add('opacity-0');
                setTimeout(() => {
                    todoItem.remove();
                    saveTodos();
                    updateEmptyState();
                }, 300);
            });
            
            // 组装元素
            todoContent.appendChild(checkbox);
            todoContent.appendChild(textSpan);
            todoItem.appendChild(todoContent);
            todoItem.appendChild(deleteBtn);
            
            // 添加到列表
            if (emptyState) emptyState.remove();
            todoList.appendChild(todoItem);
        }

        // 清除已完成任务
        function clearCompletedTodos() {
            document.querySelectorAll('.todo-item.todo-complete').forEach(item => {
                item.remove();
            });
            saveTodos();
            updateEmptyState();
        }

        // 更新空状态显示
        function updateEmptyState() {
            const hasTodos = document.querySelectorAll('.todo-item').length > 0;
            
            if (!hasTodos && !document.getElementById('emptyState')) {
                // 如果没有任务且没有空状态元素，则添加空状态
                const emptyEl = document.createElement('div');
                emptyEl.id = 'emptyState';
                emptyEl.className = 'text-gray-500 text-center py-8 border border-dashed border-gray-300 rounded-lg';
                emptyEl.innerHTML = `
                    <i class="fa fa-check-circle-o text-4xl mb-2 opacity-30"></i>
                    <p>还没有任务，添加你的第一个任务吧！</p>
                `;
                todoList.appendChild(emptyEl);
            } else if (hasTodos && document.getElementById('emptyState')) {
                // 如果有任务但有空状态元素，则移除空状态
                document.getElementById('emptyState').remove();
            }
        }

        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
